<template lang="html">
  <div class="main-page" id="store-page">
    <!-- <nav-bar :title="'分享海报'"/> -->
    <div class="share_page">
      <div class="share_prd">
        <!-- <div class="share_bg" :style="{backgroundImage: 'url(' + (active_prd.type === 'product' ? active_prd.product_url : active_prd.activity_url) + ')'}"></div> -->
        <!-- <div class="share_bg"></div> -->
        <div class="top_num" v-if="itemList.length">{{active + 1}}/{{itemList.length}}</div>
        <div class="share_box_swiper" v-if="itemList.length">
          <swiper :options="swiperOption" ref="mySwiper" @slideChangeTransitionStart="swiperChange">
            <swiper-slide v-for="(i, k) in itemList" :key="k">
              <div class="swiper_content" v-if="i.type === 'product'">
                <img :src="i.product_url" alt="">
                <div class="prd_details">
                  <div class="prd_left">
                    <h3>{{i.product_name}}</h3>
                    <p class="market_price"><span class="unit">¥</span><span class="number">{{i.product_unit_price}}</span></p>
                    <p class="original_price">原价 ¥{{i.product_market_price}}</p>
                  </div>
                  <div class="prd_right">
                    <img :src="i.xcx_code" alt="">
                  </div>
                </div>
              </div>
              <div class="swiper_content_qr" v-else>
                <img :src="i.activity_url" alt="">
                <div class="prd_right">
                    <img :src="i.xcx_code" alt="">
                  </div>
              </div>
            </swiper-slide>
          </swiper>
        </div>
        <div class="share_info" >
          <p v-if="active_prd.product_unit_price">¥{{active_prd.product_unit_price}}<span v-if="parseFloat(active_prd.share_profit)">返利¥{{active_prd.share_profit}}</span></p>
          <div class="share_menu" @click="getShareMenu">
            <img src="../../assets/image/activity/share_menu.png" alt="">
          </div>
        </div>
      </div>
      <div class="share_panl">
         <h3>{{active_prd.type === 'product' ? active_prd.product_name : active_prd.activity_name}} </h3>
         <p>{{active_prd.type === 'product' ? active_prd.product_tips : active_prd.activity_remark}}</p>
         <div class="share_panl_btn" v-show="share_panl_btn">
           <p @click="getShareOutside">
             <img src="../../assets/image/activity/share_icon.png" alt="">&nbsp;&nbsp;分享
           </p>
         </div>
      </div>
    </div>
    <!-- 菜单 -->
    <van-popup class="share_menu_page" v-model="share_menu_show" position="bottom" @click-overlay="getShareMenu">
      <div class="share_menu_page_btn">
        <van-row gutter="20">
          <van-col span="8"  v-for="(item, index) in category" v-bind:key="index">
            <div :class="activeClass === index ? 'active_menu share_menu_type_btn' : 'share_menu_type_btn'" :key="index" @click="getShareTypeBtn(index, item.id)">
              {{item.name}}
            </div>
          </van-col>
        </van-row>
      </div>
      <div class="share_menu_page_bottom" @click="share_menu_show = false">取消</div>
    </van-popup>
    <!-- 分享 -->
    <van-popup class="share_outside" v-model="share_outside_show" position="bottom" @click-overlay="getShareOutside">
      <div class="share_outside_btn">
        <div class="wechat" @click="shareMsgAndImg('msg')">
          <img src="../../assets/image/activity/share_wechat.png" alt="">
          <p>微信好友</p>
        </div>
        <div class="download_pic" @click="shareMsgAndImg('img')">
          <img src="../../assets/image/activity/download_pic.png" alt="">
          <p>保存海报</p>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import Tool from '@/utils/tool'
// import NavBar from '@/components/global/nav-bar.vue'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

export default {
  components: { swiper, swiperSlide },
  data () {
    return {
      swiperOption: {
        spaceBetween: -160
      },
      category: [],
      itemList: [],
      active_prd: {},
      invite_id: '',
      id: null,
      xcx_code: '',
      active: 0,
      activeClass: 0,
      share_menu_show: false, // 菜单
      share_outside_show: false, // 分享
      share_panl_btn: true
    }
  },
  computed: {
    swiper () {
      return this.$refs.mySwiper.swiper
    }
  },
  created () {
    this.getProfile()
    this.getCategory()
    let sUserAgent = navigator.userAgent.toLowerCase()
    let ua = Tool.isSys()
    if (ua === 'ios') {
      let edition = sUserAgent.substr(sUserAgent.length - 5)
      if (!Tool.checkPlugin(edition, '2.0.2')) {
        this.share_panl_btn = false
      }
    }
  },
  methods: {
    getProfile () {
      return new Promise((resolve, reject) => {
        this.$Axios({ url: 'profile', method: 'get' }).then((resp) => { // 请求成功
          if (resp.return_code === '0000') {
            this.invite_id = resp.data.user_info.invite_id
          }
          resolve(resp)
        }).catch((error) => { // 请求失败
          this.$_requestInterceptor('error', error)
          reject(error)
        })
      })
    },
    swiperChange () {
      console.log(this.swiper.activeIndex)
      this.active = this.swiper.activeIndex
      this.active_prd = this.itemList[this.swiper.activeIndex]
    },
    getShareMenu () {
      this.share_menu_show = !this.share_menu_show
    },
    getShareOutside () {
      if (this.active_prd.type) {
        this.share_outside_show = !this.share_outside_show
      }
    },
    shareMsgAndImg (sharetype) {
      this.$toast.loading({
        mask: true,
        message: '加载中...'
      })
      var params = {
        // is_hyaline: true
      }
      if (this.active_prd.type === 'product') {
        params.page = 'pages/product/detail/detail'
        params.scene = 'invite=' + this.invite_id + '&item_id=' + this.active_prd.product_id
      } else {
        params.page = 'pages/webview/webview'
        params.scene = 'invite=' + this.invite_id + '&c=' + this.active_prd.activity_code + '&i=' + this.id
      }
      return new Promise((resolve, reject) => {
        this.$Axios({ url: 'xcx_qr_code', method: 'post', data: params }).then((resp) => { // 请求成功
          if (resp.return_code === '0000') {
            this.$toast.clear()
            this.xcx_code = resp.data
            if (sharetype === 'msg') {
              this.sendMsg()
            } else {
              this.saveImg()
            }
          }
          resolve(resp)
        }).catch((error) => { // 请求失败
          this.$_requestInterceptor('error', error)
          reject(error)
        })
      })
    },
    getShareTypeBtn (index, id) {
      this.activeClass = index
      this.active = 0
      this.swiper.activeIndex = 0
      this.getItemList(id)
      this.getShareMenu()
    },
    sendMsg () {
      /* eslint-disable */
      let type = this.active_prd.type
      let product_url = type === 'product' ? encodeURIComponent(this.active_prd.product_url) : encodeURIComponent(this.active_prd.activity_url)
      let product_name = type === 'product' ? encodeURIComponent(this.active_prd.product_name) : ''
      let product_market_price = type === 'product' ? encodeURIComponent(this.active_prd.product_market_price) : ''
      let product_unit_price = type === 'product' ? encodeURIComponent(this.active_prd.product_unit_price) : ''
      let xcxUrl = encodeURIComponent(this.xcx_code)
      let url = 'yggactivityshare://product_image=' + product_url + '&product_name=' + product_name + '&product_market_price=' + product_market_price + '&product_unit_price=' + product_unit_price + '&xcxUrl=' + xcxUrl
      console.log(url)
      this.getShareOutside()
      window.location.href = url
    },
    saveImg () {
      let type = this.active_prd.type
      let product_url = type === 'product' ? encodeURIComponent(this.active_prd.product_url) : encodeURIComponent(this.active_prd.activity_url)
      let product_name = type === 'product' ? encodeURIComponent(this.active_prd.product_name) : ''
      let product_market_price = type === 'product' ? encodeURIComponent(this.active_prd.product_market_price) : ''
      let product_unit_price = type === 'product' ? encodeURIComponent(this.active_prd.product_unit_price) : ''
      let xcxUrl = encodeURIComponent(this.xcx_code)
      let url = 'yggactivitysave://product_image=' + product_url + '&product_name=' + product_name + '&product_market_price=' + product_market_price + '&product_unit_price=' + product_unit_price + '&xcxUrl=' + xcxUrl
      console.log(url)
      this.getShareOutside()
      window.location.href = url
    },
    getCategory () {
      return new Promise((resolve, reject) => {
        this.$Axios({ url: 'new_posters', method: 'get' }).then((resp) => { // 请求成功
          if (resp.return_code === '0000') {
            this.category = resp.data.list
            if (resp.data.list[0].id) {
              this.getItemList(resp.data.list[0].id)
            }
          }
          resolve(resp)
        }).catch((error) => { // 请求失败
          this.$_requestInterceptor('error', error)
          reject(error)
        })
      })
    },
    getItemList (id) {
      this.$toast.loading({
        mask: true,
        message: '加载中...'
      })
      return new Promise((resolve, reject) => {
        this.$Axios({ url: 'new_posters', method: 'get', params: { id: id } }).then((resp) => { // 请求成功
          this.$toast.clear()
          if (resp.return_code === '0000') {
            this.itemList = resp.data.data
            this.id = resp.data.id
            this.active_prd = resp.data.data[0]
          }
          resolve(resp)
        }).catch((error) => { // 请求失败
          this.$_requestInterceptor('error', error)
          reject(error)
        })
      })
    }
  }
}
</script>
